import React, { Component } from 'react'
import { getGroups } from 'api/home'
import { Link } from 'react-router-dom'
import { getCityCurrent } from 'utils/storage'
import { BASE_URL } from 'utils/url'
export default class Groups extends Component {
  state = {
    groups: [],
  }
  componentDidMount() {
    this.loadGroups()
  }
  render() {
    return (
      <div className="groupsCom">
        <div className="title">
          <h2>租房小组</h2>
          <Link to="/" className="more">
            更多
          </Link>
        </div>
        <ul>
          {this.state.groups.map((item) => (
            <li key={item.id}>
              <div>
                <h3>{item.title}</h3>
                <span>{item.desc}</span>
              </div>
              <img src={BASE_URL + item.imgSrc} alt="" />
            </li>
          ))}
        </ul>
      </div>
    )
  }
  loadGroups = async () => {
    try {
      const area = getCityCurrent()?.value || 'AREA|88cff55c-aaa4-e2e0'
      const { body: res } = await getGroups({ area })
      this.setState({
        groups: res,
      })
    } catch (err) {}
  }
}
